package com.frxuexi.mdm2203.demo

import android.util.Log
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Build
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.AlertDialogDefaults
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.navigation.NavHostController

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun Demo02(/*navHostController: NavHostController*/) {
    //状态可变的变量，用以重组界面
    var myname by remember {
        mutableStateOf("aa")
    }
    var mypass by remember {
        mutableStateOf("123")
    }

    //弹框是否显示
    var isShow by remember {
        mutableStateOf(false)
    }

    //spacedBy:子元素之间的间隔
    Column(verticalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(20.dp)) {
        TextField(value = myname, onValueChange = {
            myname = it
        }, label = { Text(text = "请输入用户名") },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.AccountCircle,
                    contentDescription = ""
                )
            })
        //两个元素之间的间隔
//        Spacer(modifier = Modifier.height(10.dp))
        OutlinedTextField(
            value = mypass,
            onValueChange = { mypass = it },
            label = { Text(text = "密码") },
            visualTransformation = PasswordVisualTransformation(),//密文形式
            leadingIcon = { Icon(imageVector = Icons.Default.Lock, contentDescription = "") },
            trailingIcon = {
                Text(modifier = Modifier
                    .clickable {
                        Log.i("===", "发送成功")
                    }
                    .padding(end = 10.dp), text = "发送验证码", color = Color.Blue)
            }
        )

        Button(
            onClick = { isShow = true },
            border = BorderStroke(1.dp, Color.Black),
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Gray,
                contentColor = Color.Yellow
            )
        ) {
            Text(text = "按钮1")
        }

        OutlinedButton(onClick = {
//            navHostController.navigate("main/$myname")
//            navHostController.navigate("main")
        }) {
            Text(text = "登录")
        }
        FilledTonalButton(onClick = { /*TODO*/ }) {
            Text(text = "按钮3")
        }
        ElevatedButton(onClick = { /*TODO*/ }) {
            Text(text = "按钮4")
        }
        TextButton(onClick = {
            Log.i("===", "按钮点击了")
        }) {
            Text(text = "按钮5")
        }
    }

    if (isShow) {
        AlertDialog(
            onDismissRequest = { isShow=false },
            confirmButton = {
                Button(onClick = {
                    Log.i("===","已删除")
                    isShow=false
                }){
                    Text(text = "确认")
            }},
            dismissButton={
                FilledTonalButton(onClick = { isShow=false}) {
                    Text(text = "取消")
                }
            },
            title = {
                Text(text = "提示")
            },
            text = { Text(text = "是否删除这个数据吗？") },
            icon = { Icons.Default.Build },
            containerColor = Color.Yellow,
        )
        /*AlertDialog(onDismissRequest = { isShow = false }) {
//            Column {
//                Text(text = "提示")
//                Text(text = "是否删除这个数据吗？")
//
//            }
        }*/
    }

}